<template>
	<div class="up-image thumb" >
		<img class="none" @click="open" v-show="!showValues" src="@/assets/images/add-img.png" />
		<img class="img-value" v-show="showValues" :src="showValues" />
		<img class="img-clearable" title="删除" v-show="clearable && showValues" @click.stop="clear"
			src="@/assets/images/img-close.png" />
	</div>

	<div 
	  v-show="show"
	  @click.self="close"
		class="fixed left-0 top-0 w-[100vw] h-[100vh]  z-[2] flex justify-center items-center bg-modal">
		<div class="w-[1200px] h-[550px] relative">
			<div class="absolute right-0 top-[-40px] text-[25px] w-[20px] thumb" title="关闭" @click="close">
				<el-icon color="white">
					<Close />
				</el-icon>
			</div>
			<Material :fixationVal="fixationVal" @singleSelectEmit="singleSelectEmit" defaultBoxStatus="select" :initMittBus="false" ref="material" />
		</div>
	</div>
</template>
<script setup lang="ts" name="">
import { ref, watch } from "vue";
import Material from "@/components/Material/index.vue";
import {type ListShow} from "@/components/Material/components/List/index";
import {Close} from "@element-plus/icons-vue";

interface Props {
	modelValue?: string ;
	showValue?: string;
	portrait?:string;
	clearable?: boolean;
	fixationVal?:string[];
}

const props = withDefaults(defineProps<Props>(), {
	modelValue: undefined,
	showValue: "",
	clearable: false,
	fixationVal:()=>[]
});

watch(
	() => props.modelValue,
	newValue => {
		showValues.value = newValue;
	}
);

const show = ref<boolean>(false);


const material = ref<InstanceType<typeof Material>>();

const close = () => {
	show.value = false;
}

watch(
	() => props.showValue,
	newValue => {
		showValues.value = newValue;
	}
);

watch(()=> show.value,(newVal)=>{
   if(newVal === true){
      material.value?.mittBusInitFunc()
	 }else{
		  material.value?.mittBusClearFunc()
	 }
});



const emits = defineEmits<{
	(event: "update:modelValue", value: string | undefined): void;
	(event: "update:showValue", value: string): void;
}>();


const showValues = ref<string|undefined>(props.modelValue);


watch(() => showValues.value, (newVal) => {
	emits("update:modelValue", newVal);
});

const open = ()=>{
	 show.value = true;
}

const singleSelectEmit = (item: ListShow)=>{
   showValues.value = item.full_url;
	 close();
}


const clear = () => {
	showValues.value = "";
	emits("update:modelValue", undefined);
	emits("update:showValue", "");
};

defineExpose({ clear });
</script>
<style scoped lang="scss">
@import "./index.scss";
</style>
